<!--自定义导航栏-->
<template>
  <view
    style="
      width: 750rpx;
      background-color: transparent;
      z-index: 65535;
      position: relative;
    "
  >
    <view
      style="width: 100%; background-color: transparent"
      :style="{ height: `${statusBarHeight}px` }"
    ></view>
    <view
      style="background-color: transparent"
      :style="{ height: `${statusBarToMenuButtonGap}px` }"
    ></view>
    <view
      style="background-color: transparent; width: 100%"
      :style="{ height: `${menuButtonHeight}px` }"
    >
      <!--胶囊的整个横向区域，插槽元素要设置 style 的 width: 100%, height: 100%-->
      <slot name="default"></slot>
    </view>
  </view>
</template>

<script>
import TopInfo from "@/utils/top-info";
export default {
  name: "my-navbar",
  data() {
    return {
      /**
       * @description 状态栏高度，单位 px
       */
      statusBarHeight: 0,
      /**
       * @description 状态栏到胶囊的间距，单位 px
       */
      statusBarToMenuButtonGap: 0,
      /**
       * @description 胶囊高度，单位 px
       */
      menuButtonHeight: 0,
    };
  },
  mounted() {
    // 获取状态栏高度
    this.statusBarHeight = TopInfo.getStatusBarHeight();
    console.log("状态栏高度", this.statusBarHeight);
    // 获取状态栏到胶囊的间距(胶囊上边缘 - 状态栏高度)
    this.statusBarToMenuButtonGap = TopInfo.getStatusBarToMenuButtonGap();
    console.log(
      "状态栏到胶囊的间距(胶囊上边缘 - 状态栏高度)",
      this.statusBarToMenuButtonGap
    );
    // 获取胶囊高度
    this.menuButtonHeight = TopInfo.getMenuButtonHeight();
    console.log("胶囊高度", this.menuButtonHeight);
  },
};
</script>
